<template>
	<view class="container">
		
		<view class="menu">
			
		 <uni-segmented-control :current="current" 
		 :values="values" @clickItem="onClickItem" 
		 styleType="button" 
		 activeColor="#2b9939">
		 </uni-segmented-control>
		</view>
			 
		 
		<view class="layout">
			
			
			
			<view class="box" v-for="(item, index) in images" :key="item._id">
				<view class="pic">
					<image :src="item.url" 
					mode="widthFix"
					lazy-load
					@click="onPreview(index)"
					>
					</image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
			
		</view>
		
		<view class="fixed-nav">
			<view class="item refresh" @click="refresh">
				<uni-icons type="refreshempty" size="26" color="#888"></uni-icons>
			</view>
			<view class="item backToTop" @click="backToTop">
				<uni-icons type="up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		
		<view class="loadMore">
			<uni-load-more status="more"></uni-load-more>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
	const classes = [
		{key: 'all', value: '全部'},
		{key: 'dog', value: '狗狗'},
		{key: 'cat', value: '猫咪'}
	]
	const current = ref(0)
	const values = computed(() => {
		return classes.map(item => item.value)
	})
	const onClickItem = (e) => {
		// console.log('requestDemo ', e)
		current.value = e.currentIndex
		images.value = []
		init()
	}
	
	const images = ref([]) 
	const init = () => {
		uni.showNavigationBarLoading()
		uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			data: {
				size: 5,
				type: classes[current.value].key,
			},
			header: {
				'access-key': 'xhuiclear'
			},
			timeout: 10000
		}).then(function (res) { 
			const {data: {data, errCode, errMsg}} = res
			
			if(errCode === 0) {
				images.value = images.value.concat(data)
			} else if(errCode === 400){
				uni.showToast({
					icon: 'none',
					title: errMsg,
					duration: 5000
				})
			}
		}).catch(err => {
			console.log('err');
		}).finally(() => {
			console.log('requestDemo finally ')
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	const refresh = () => {
		uni.startPullDownRefresh()
	}
	
	const backToTop = () => {
		uni.pageScrollTo({
			scrollTop: 0
		})
	}
	
	onPullDownRefresh(() => {
		// current.value = 0
		images.value = []
		init()
	})
	
	onReady(init)
	
	function onPreview(index) {
		uni.previewImage({
			current: index,
			urls: images.value.map(item => item.url)
		})
	}
	
	onReachBottom(init)
</script>

<style lang="scss" scoped>
.container {
	
	.menu {
		padding: 50rpx 50rpx 0;
	}
	
	.layout {
		padding: 50rpx;
		.box {
			margin: 0 0 50rpx 0;
			// box-shadow: X偏移 Y偏移 模糊半径 颜色;
			box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
			border-radius: 15rpx;
			overflow: hidden;
			.pic {
				image {
					width: 100%;
				}
			}
			.text {
				padding: 30rpx;
				font-size: 35rpx;
				color: #333;
			}
			.author {
				padding: 0 30rpx 30rpx 0;
				text-align: right;
				color: #888;
			}
		}
	}

	.fixed-nav {
		position: fixed;
		right: 30rpx;
		bottom: 0;
		// background-color: orange;
		padding-bottom: env(safe-area-inset-bottom);
		.item {
			width: 100rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			margin-bottom: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #eee;
		}
	}
	
	.loadMore {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	}

}
</style>
